<template>
    <!-- :demoUrl="dUrl" -->
    <adoc :navs="navs"
        :demoUrl="demoUrl"
        :topOptions="{
            logo:require('./assets/logo.gif'),
            title:'AYM UI'
        }">
        <router-view />
    </adoc>
</template>
<script>
import { navs } from './router'
export default {
    name: 'documentApp',
    data() {
        return {
            navs
        }
    },
    computed: {
        demoUrl() {
            return window.location.pathname.replace('document.html', 'examples.html')
        }
    },
    method: {}
}
</script>
<style>
body {
    padding-top: 80px;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.menu-button {
    vertical-align: middle;
    float: left;
    width: 20px;
    height: 50px;
    padding-top: 17px;
    cursor: pointer;
}

.menu-button i {
    background: #fff;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
}

.menu-button i+i {
    margin-top: 5px;
}

@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        z-index: 10;
        background-color: #f9f9f9;
        height: 100%;
        overflow-y: scroll;
        top: 0;
        left: 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transform: translate(-100%, 0);
        transition: all 0.4s cubic-bezier(0.4, 0, 0, 1);
    }

    .sidebar.open {
        display: block !important;
        transform: translate(0, 0);
    }
}


.viewbox {
    z-index: 1;
    overflow: hidden;
    position: absolute;
    border-radius: 6px;
    background: #f2f2f4;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    right: 30px;
    width: 375px;
    min-width: 375px;
    -webkit-box-shadow: 0 2px 3px hsla(0, 0%, 4%, .1), 0 0 0 1px hsla(0, 0%, 4%, .1);
    box-shadow: 0 2px 3px hsla(0, 0%, 4%, .1), 0 0 0 1px hsla(0, 0%, 4%, .1)
}


.viewbox-fixed {
    position: fixed;
    top: 80px
}

.viewbox iframe {
    width: 100%;
    display: block
}

.viewbox__nav {
    height: 63px;
    background: url('') no-repeat;
    background-size: 100%;
    border-bottom: 1px solid #e5e5e5
}

.viewbox__url {
    left: 20px;
    top: 25px;
    right: 40px;
    font-size: 15px;
    position: absolute;
    text-align: center;
    font-weight: 700;
    line-height: 28px;
    font-family: PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    /*overflow-x: scroll;*/
    text-overflow: ellipsis;
}

@media (max-width:1300px) {
    .viewbox__url {
        top: 21px;
        line-height: 24px
    }
}

.viewbox__reload {
    font-weight: 700;
    top: 25px;
    right: 10px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    position: absolute
}
</style>
